<template>
  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested"
                class="title-icon" />项目管理
    </h3>

    <el-card>
      <div slot="header">
        <span>收款配置</span>
      </div>
      <el-form :model="form"
               label-position="left"
               label-width="120px">
        <el-form-item label="配置维度:">
          <el-radio-group v-model="form.dimension">
            <el-radio :label="3">项目</el-radio>
            <el-radio :label="6">楼栋</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目名称:">{{name}}</el-form-item>
        <el-form-item label="楼栋:">
          <el-button size="small"
                     :type="cur==-1?'primary':'default'"
                     @click="getAll()">全选</el-button>
          <div v-if="dongs.length>0">
            <el-button size="small"
                       v-for="(item,index) in dongs"
                       :key="index"
                       :type="index==cur?'primary':'default'"
                       @click="getBankLoudong(item, index)">{{item.loudong}}栋</el-button>
          </div>
        </el-form-item>
        <el-form-item label="入账账号:"
                      style="margin-top: 1px;">
          <el-table :data="tableData"
                    border
                    style="width: 100%">
            <el-table-column prop="id"
                             label="序号"
                             width="180"></el-table-column>

            <el-table-column prop="projectName"
                             label="款项类型"></el-table-column>
            <el-table-column label="款项名称"
                             width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.status==1">定金</span>
                <span v-if="scope.row.status==2">首期</span>
                <span v-if="scope.row.status==3">印花税</span>
                <span v-if="scope.row.status==4">不动产权办理</span>
                <span v-if="scope.row.status==5">预约金</span>
              </template>
            </el-table-column>
            <el-table-column label="入账账号">
              <template slot-scope="scope">
                {{scope.row.accountName}}
                <i class="el-icon-circle-plus-outline"
                   style="color:rgb(64, 158, 255);margin:0 5px;cursor:pointer"
                   @click="editBank(scope.row)"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click="addBank=!addBank"
                     v-if="cur!=-1"> 新增入账银行</el-button>
          <el-button size="small"
                     @click="onCancle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="mask"
         v-if="addBank">
      <div class="content">
        <el-form>
          <el-form-item label="账户类型:">
            <el-radio label="1"
                      v-model="status">定金</el-radio>
            <el-radio label="2"
                      v-model="status">首期</el-radio>
            <el-radio label="3"
                      v-model="status">印花税</el-radio>
            <el-radio label="4"
                      v-model="status">不动产权办理</el-radio>
            <el-radio label="5"
                      v-model="status">预约金</el-radio>
          </el-form-item>
          <el-form-item label="项目名称:">{{name}}</el-form-item>
          <el-form-item label="账户名称:"
                        v-if="accountArr.length>0">
            <el-select v-model="accountName"
                       placeholder="请输入银行名称"
                       value-key="label"
                       style="width:300px">
              <el-option :label="item.bankOfAccount"
                         :value="item.bankOfAccount"
                         v-for="(item,index) in accountArr"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>

          <el-button type="primary"
                     @click="addAccounts">确定</el-button>
          <el-button type="default"
                     @click="cancelAccounts">取消</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getDong, getBank, addAccount, getAllBank } from "@/api/project";
export default {
  name: "collection",
  data () {
    return {
      addBank: false,
      form: {
        dimension: "1",
        projectName: "",
        bindDevices: "",
        ipAddress: "",
        project: ""
      },
      projectNames: "",
      status: "",
      accountArr: [],
      accountName: "",
      id: "",
      dongs: [],
      tableData: [
        { id: 1, status: 1, projectName: "非贷款类房款", accountName: "", projectId: "" },
        { id: 2, status: 2, projectName: "非贷款类房款", accountName: "", projectId: "" },
        { id: 3, status: 3, projectName: "代收费用", accountName: "", projectId: "" },
        { id: 4, status: 4, projectName: "代收费用", accountName: "", projectId: "" },
        { id: 5, status: 5, projectName: "代收费用", accountName: "", projectId: "" }
      ],
      name: "",
      status: "",
      banks: [],
      cur: -1
    };
  },
  watch: {
    status (val) {
      if (val != "") {
        this.accountArr = [];
        var arrs = this.tableData[val - 1];
        for (var i = 0; i < this.banks.length; i++) {
          if (arrs.accountName.indexOf(this.banks[i].bankOfAccount) == -1) {
            this.accountArr.push(this.banks[i]);
          }
        }
      }
    }
  },
  mounted () {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    this.getDongs(this.id);
    this.getBackAlls();
  },
  methods: {
    cancelAccounts () {
      this.status = "";
      this.accountArr = [];
      this.addBank = false;
    },
    getAll () {
      this.cur = -1;
      this.tableData = [
        { id: 1, status: 1, projectName: "非贷款类房款", accountName: "", projectId: "" },
        { id: 2, status: 2, projectName: "非贷款类房款", accountName: "", projectId: "" },
        { id: 3, status: 3, projectName: "代收费用", accountName: "", projectId: "" },
        { id: 4, status: 4, projectName: "代收费用", accountName: "", projectId: "" },
        { id: 5, status: 5, projectName: "代收费用", accountName: "", projectId: "" }
      ];
    },
    onCancle () {
      this.$router.go(-1);
      document
        .querySelector(".tags-view-item.active>span.el-icon-close")
        .click();
    },
    editBank (item) {
      this.accountArr = [];
      this.status = item.status.toString();
      this.addBank = true;
    },
    getBackAlls () {
      getAllBank(this.id).then(res => {
        this.banks = res.data;
      });
    },
    addAccounts () {
      if (this.accountName == "") {
        return this.$message({
          message: "请输入账号"
        });
      }
      if (this.status == "") {
        return this.$message({
          message: "请选择账号类型"
        });
      }
      var accountName = this.accountName;
      if (
        this.tableData[this.status - 1].accountName.indexOf(accountName) > -1
      ) {
        return this.$message({
          message: "账号已存在，请重新选择"
        });
      }
      addAccount(this.id, this.dongs[this.cur].id, accountName, this.status).then(
        res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "新增成功"
            });
            this.addBank = false;
          } else {
            this.$message({
              type: "success",
              message: res.message
            });
          }
        }
      );
    },
    getDongs (id) {
      getDong(id).then(res => {
        this.dongs = res.data;
        if (res.data.length > 0) {
          this.cur = 0;
          this.getBanks(res.data[0].id);
        }
      });
    },
    getBankLoudong (item, index) {
      if (this.cur != index) {
        this.cur = index;
        this.getBanks(item.id);
      }
    },
    getBanks (id) {
      getBank(this.id, id).then(res => {
        var arr = res.data;
        var arr = res.data;
        if (res.data.length == 0) {
          this.tableData = [{ id: 1, status: 1, projectName: "非贷款类房款", accountName: "", projectId: "" },
          { id: 2, status: 2, projectName: "非贷款类房款", accountName: "", projectId: "" },
          { id: 3, status: 3, projectName: "代收费用", accountName: "", projectId: "" },
          { id: 4, status: 4, projectName: "代收费用", accountName: "", projectId: "" },
          { id: 5, status: 5, projectName: "代收费用", accountName: "", projectId: "" }];
        } else {
          var l = res.data.length;
          for (var i = 0; i < l; i++) {
            this.tableData[arr[i].status - 1].accountName = arr[i].accountName;
            this.tableData[arr[i].status - 1].projectId = arr[i].projectId;
          }
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    border: 0 none;
  }
}
.title-small {
  font-size: 14px;
}

.money {
  color: #409eff;
}
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.5);
  .content {
    width: 600px;
    padding: 30px 60px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
  }
}
</style>
